<template>
  <div>
  	<div class="banner" @click="handleBannerClick">
  		<img class="banner-img" :src="bannerImg">
  		<div class="banner-info">
  			<div class="banner-title">{{this.sightName}}</div>
  			<div class="banner-number">
  				<span class="iconfont banner-icon">&#xe692;</span>
  				{{this.bannerImgs.length}}
  			</div>
  		</div>
  	</div>
  	<fade-animation>
    	<common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handelGallaryClose"></common-gallary>
  	</fade-animation>
  </div>
</template>

<script>
  import CommonGallary from 'common/gallary/Gallary'
  import FadeAnimation from 'common/fade/FadeAnimation'
	export default {
		name: 'DetailBanner',
		props: {
			sightName: String,
			bannerImg: String,
			bannerImgs: Array
		},
		data() {
			return {
				showGallary: false
			}
		},
		methods:{
			handleBannerClick () {
				this.showGallary = true
			},
			handelGallaryClose () {
				this.showGallary = false
			}
		}, 
    components: {
      CommonGallary,
      FadeAnimation
    }
	}
</script>

<style lang="stylus" scoped>
	.banner
		position:relative
		overflow:hidden
		height:0
		/*padding-bottom的值是基于父元素的width来计算的,则padding-bottom=100%/3.75=26.66%  子元素的图片的宽为375px,高为100px,则算出来的宽高比为375/100=3.75*/
		padding-bottom:55%
		.banner-img
			width:100%
		.banner-info
			display:flex
			position:absolute
			left:0
			right:0
			bottom:0
			line-height: .6rem
			color:#fff
			background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
			.banner-title
				flex:1
				font-size:.32rem
				padding: 0 .2rem
			.banner-number
				height:.32rem
				line-height:.32rem
				margin-top:.14rem
				padding: 0 .4rem
				border-radius: .2rem
				background:rgba(0,0,0,.8)
				font-size:.24rem
				.banner-icon
					font-size:.24rem
</style>